import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:share_fit/app/components/back_btn_icon.dart';
import 'package:share_fit/app/controllers/device/dail/dial_limit_view.dart';
import 'package:share_fit/app/controllers/device/dail/dial_logic.dart';
import 'package:share_fit/app/controllers/device/dail/dial_show_view.dart';
import 'package:share_fit/app/helper/ext/tr_ext.dart';
import 'package:share_fit/app/tools/color_const.dart';
import 'package:share_fit/generated/locales.g.dart';

import 'dial_const.dart';

class DialMore extends StatelessWidget {

  final logic = Get.put(DialLogic());
  ScrollController _scrollController = ScrollController();

  @override
  Widget build(BuildContext context) {
    logic.getWatchFaceOnlineInformation(true);
    _scrollController.addListener(() {
      if (logic.state.flag && _scrollController.position.pixels >
          _scrollController.position.maxScrollExtent - 50) {
        if(logic.state.lists.length<logic.state.totalCount) {
          logic.state.flag = false;
          logic.getWatchFaceOnlineInformation(true);
        }
      }
    });
    return Scaffold(
      appBar: AppBar(
        title: Text(LocaleKeys.dial_center.ts, style: TextStyle(fontSize: 54.sp, color: ColorConst.btnFontColor),),
        centerTitle: true,
        leading: BackBtnIcon(onTap: () => Get.back()),
      ),
      body: Container(
        margin: EdgeInsets.only(left: 42.w, right: 42.w),
        padding: EdgeInsets.only(top: 42.h),
        child: GetBuilder<DialLogic>(
            id: DialConst.dialListViewId,
            builder: (_){
              return GridView.builder(
                controller: _scrollController,
                scrollDirection: Axis.vertical,
                itemCount: logic.state.lists.length,
                itemBuilder: (BuildContext context, int index) {
                  return _buildItem(context, index);
                },
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  mainAxisExtent: 450.h,
                  mainAxisSpacing: 80.w,
                  crossAxisCount: 4,),
              );
            }),
      ),
    );
  }

  Widget _buildItem(BuildContext context, index) {
    Widget widget = GestureDetector(
      behavior: HitTestBehavior.opaque,
      onTap: (){
        int count = 0;
        for(var element in logic.state.watchFaceInfo) {
          Map map = jsonDecode(jsonEncode(element));
          if((4&map['type'])==4){
            count++;
          }
        }
        if(count >= logic.state.watchFaceCount && logic.state.downlodLists.isNotEmpty) {
          showDialog(context: context,
              barrierDismissible: true,
              builder: (_){
            return DialLimitDialog(logic.state.lists[index]);
          });
          return;
        }
        showDialog(context: context,
            barrierDismissible: true,
            builder: (_){
              return DialShowDialog(logic.state.lists[index]);
        });
      },
      child: Column(
        children: [
          GestureDetector(
            onTap: (){
              int count = 0;
              for(var element in logic.state.watchFaceInfo) {
                Map map = jsonDecode(jsonEncode(element));
                if((4&map['type'])==4){
                  count++;
                }
              }
              if(count >= logic.state.watchFaceCount && logic.state.downlodLists.isNotEmpty) {
                showDialog(context: context,
                    barrierDismissible: true,
                    builder: (_){
                  return DialLimitDialog(logic.state.lists[index]);
                });
                return;
              }
              showDialog(context: context,
                  barrierDismissible: true,
                  builder: (_){
                    return DialShowDialog(logic.state.lists[index]);
              });
            },
            child: Image(image: NetworkImage(logic.state.lists[index].preview), width: 200.w, height: 200.w,),
          ),
          Container(
            margin: EdgeInsets.only(top: 16.h),
            child: Text(logic.state.lists[index].title, maxLines: 1, overflow: TextOverflow.ellipsis, style: TextStyle(fontSize: 42.sp, color: ColorConst.btnFontColor),),
          ),
          SizedBox(height: 31.h,),
          Container(
            width: 200.w,
            height: 80.h,
            alignment: Alignment.center,
            decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage('assets/images/device/icon_dial_download_bg.png'),
                )),
            child: Text(LocaleKeys.dial_download.ts, style: TextStyle(fontSize: 36.sp, color: ColorConst.btnFontColor),),
          ),
          SizedBox(height: 20.h,),
        ],),
    );
    return widget;
  }

}